<template>
    <div class="cricle-integral">
        <div v-for="i in integrallist" :key="i.id">
            <div class="my-integral">
                <p>我的积分 ：{{i.num}}</p><span  style="cursor: pointer">签到</span>
            </div>
            <p class="title" v-if="i.show !==1">做任务，  赚积分！</p>
            <div class="integral-text" v-if="i.show !==1">
                <ul>
                    <li v-for="y in i.child" :key="y.id">
                        <p>{{y.text}}</p>
                        <div>
                            <p><img src="../../assets/jifen.png" alt=""><span>积分</span><b>+{{y.num}}</b></p>
                            <img src="../../assets/xiaiybu.png" alt="">
                        </div>
                        <div style="clear: both"></div>
                    </li>
                </ul>
                <div style="clear: both"></div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "CricleIntegral",
        props:['integrallist'],
        created () {

        },
        methods:{

        }
    }
</script>

<style scoped lang="less">
    .cricle-integral{
        width: 260px;
        /*height: 595px;*/
        div{
            >.my-integral{
                width: 260px;
                height: 60px;
                background-color: #ffffff;
                border-radius: 4px;
                border: solid 1px #ff5371;
                >p{
                    line-height: 58px;
                    text-align: center;
                    width: 150px;
                    font-family: MicrosoftYaHei;
                    font-size: 19px;
                    letter-spacing: 0px;
                    color: #ff5371;
                    float: left;
                }
                span{
                    float: right;
                    display: block;
                    width: 92px;
                    height: 58px;
                    background-color: #ff5371;
                    border-radius: 4px;
                    border: solid 1px #ff5371;
                    text-align: center;
                    color: white;
                    line-height: 60px;
                    font-size: 20px;
                }
            }
            >.title{
                color: #ff5371;
                font-size: 20px;
                text-align: center;
                padding-top: 15px;
            }
            >.integral-text{
                margin-top: 15px;
                ul{
                    li{
                        height: 65px;
                        margin-bottom: 15px;
                        >p{
                            color: #ff5371;
                            font-size: 15px;
                        }
                        div{
                            margin-top: 15px;
                            >img{
                                float: right;
                            }
                            >p{
                                width: 120px;
                                border-radius: 14px;
                                background-color: #fefbea;
                                height: 28px;
                                float: left;
                                img{
                                    float: left;
                                }
                                span{
                                    float: left;
                                    margin-top: 3px;
                                    font-size: 14px;
                                    margin-left: 8px;
                                }
                                b{
                                    color: #ffe14f;
                                    font-size: 14px;
                                    padding-top: 3px;
                                    display: block;
                                    margin-left: 5px;
                                    float: left;
                                }
                            }
                        }
                    }
                }

            }
        }

    }
</style>